<script lang="ts">
    import type { ExDrawNodeInfo } from "$lib/api/board/board_draw";
    import type { NodeProps } from "@xyflow/svelte";
    import NodeWrap from "../common/NodeWrap.svelte";
    import mermaid from "mermaid";
    import type { Action } from "svelte/action";

    const props: NodeProps = $props();
    const nodeInfo = $derived(props.data as ExDrawNodeInfo);

    async function runRender(node: HTMLElement) {
        node.textContent =
            nodeInfo.content.DevelopMermaidContent?.content ?? "";
        node.removeAttribute("data-processed");

        await mermaid.run({
            nodes: [node],
            suppressErrors: true,
        });
    }

    const mermaidAction: Action = (node) => {
        mermaid.initialize({
            look: "handDrawn",
        });
        $effect(() => {
            if (nodeInfo.content.DevelopMermaidContent?.content != undefined) {
                runRender(node);
            }
        });
    };
</script>

<NodeWrap nodeProps={props} showBorder showBgColor showResizer>
    <div class="h-full overflow-y-auto nowheel">
        <pre use:mermaidAction class="mermaid"></pre>
    </div>
</NodeWrap>
